﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>导航控件</title>
   
    <script src="../../lib/XiaoFuMap.js" type="text/javascript"></script>
     
    <script type="text/javascript">

        var map, svgLayer_point;
        var control = null;
        function load() {
            map = new XiaoFu.Map("#MapContainer");
            var layer = new XiaoFu.GoogleCacheLayer(GoogleUrl.Map);
            map.addLayer(layer);
            svgLayer_point = new XiaoFu.SVGLayers("point");
            map.addLayer(svgLayer_point);
            control = new XiaoFu.Navigation();
            control.addEventListener("GetLocation", function (evtType,data) {
                var destProj = new XiaoFu.Projection("EPSG:900913");
                var sourceProj = new XiaoFu.Projection("WGS84");
                var pointSource = new XiaoFu.GeoPoint(data.location.x, data.location.y);
                var transform = new XiaoFu.Transform();
                var pointDest = transform.transform(sourceProj, destProj, [pointSource]);
                var svg_Geo = new XiaoFu.SVG_Point(0, "location", pointDest[0].x, pointDest[0].y);
                svg_Geo.fill = "blue";
                svgLayer_point.addChild(svg_Geo);
            });
            control.addEventListener("ClearLocation", function (evt) {
                svgLayer_point.clearAll();
            });
            map.addControl(control);           
        }
        function showControl() {control.show(); };
        function hideControl() { control.hide(); };
        function showNavControl() { control.showNavBar(); };
        function hideNavControl() { control.hideNavBar(); };
        function showScaleControl() { control.showScaleBar(); };
        function hideScaleControl() { control.hideScaleBar(); };
        function showZoomInControl() { control.showZoomInBar(); };
        function hideZoomInControl() { control.hideZoomInBar(); };
        function showZoomOutControl() { control.showZoomOutBar(); };
        function hideZoomOutControl() { control.hideZoomOutBar(); };
    </script>
     <style type="text/css">
        html,body,div
        {
            padding:0px;
            margin:0px;
         }
    
    </style>
</head>
<body onload="load()">
    <div id="MapContainer" style="z-index: 10000; border: 1px solid blue; position: relative; 
        width: 1000px; height: 500px;">
      
    </div>  
    <input type="button" value = "显示控件"   onclick="showControl();"/>
     <input type="button" value = "隐藏控件"   onclick="hideControl();"/>
     <input type="button" value = "显示导航面板"   onclick="showNavControl();"/>
     <input type="button" value = "隐藏导航面板"   onclick="hideNavControl();"/>
     <input type="button" value = "显示鱼骨"   onclick="showScaleControl();"/>
     <input type="button" value = "隐藏鱼骨"   onclick="hideScaleControl();"/>
      <input type="button" value = "显示放大按钮"   onclick="showZoomInControl();"/>
     <input type="button" value = "隐藏放大按钮"   onclick="hideZoomInControl();"/>
      <input type="button" value = "显示缩小按钮"   onclick="showZoomOutControl();"/>
     <input type="button" value = "隐藏缩小按钮"   onclick="hideZoomOutControl();"/>
    <div id="msg">
    </div>
</body>
</html>
